<template>
  <div class="px-2" v-loading="isLoading">
    <div class="font-black mb-2 text-lg">
      <!-- <el-icon><DocumentAdd /></el-icon> -->
      <span>发表新留言</span>
    </div>
    <el-form label-width-1="80px">
      <el-form-item label1="发表版块">
        <el-radio-group v-model="office">
          <el-radio :label="1">管制一室</el-radio>
          <el-radio :label="2">管制二室</el-radio>
        </el-radio-group>
        <p class="mt-1 text-xs opacity-50">
          您发表的留言仅会显示在
          <b>
            {{ office == 1 ? '管制一室' : office == 2 ? '管制二室' : 'Error' }}
          </b>
          页面中。
        </p>
      </el-form-item>
      <el-form-item label1="匿名发表">
        <el-radio-group v-model="isAnonymous">
          <el-radio :label="true">匿名发表</el-radio>
          <el-radio :label="false" :disabled="!user">实名发表</el-radio>
        </el-radio-group>
        <p class="mt-1 text-xs opacity-50" v-if="!user">
          您当前未登录，无法发表实名留言。您可以点击右上方菜单选择“账号设置”进行登录。
        </p>
      </el-form-item>
      <el-form-item label1="是否公开">
        <el-radio-group v-model="isPublic">
          <el-radio :label="true">所有人可见</el-radio>
          <el-radio :label="false" :disabled="!user || isAnonymous">仅提到的人可见</el-radio>
        </el-radio-group>
        <!-- <p class="mt-1 text-xs opacity-50" v-if="!user">
          您当前未登录，无法发表私密留言。您可以点击右上方菜单选择“账号设置”进行登录。
        </p> -->
        <p class="mt-1 text-xs opacity-50" v-if="isAnonymous">
          私密留言无法匿名发表，否则您自己将无法再次查看该留言及其回复内容。
        </p>
      </el-form-item>
      <el-form-item label1="提到的人">
        <el-select
          v-model="mentionedUsers"
          multiple
          :placeholder="isPublic ? '提到的人' : '可见人员'"
          class="w-full"
        >
          <el-option
            v-for="item in userList"
            :key="item.number"
            :label="item.clientName"
            :value="item.number"
          >
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">{{
              item.number
            }}</span>
          </el-option>
        </el-select>
        <p class="mt-1 text-xs opacity-50" v-if="!isPublic">当设置为“非公开”时，此列表必须设置。</p>
      </el-form-item>
      <el-divider />
      <el-form-item label1="留言内容">
        <el-input
          v-model="text"
          type="textarea"
          clearable
          :autosize="{ minRows: 6, maxRows: 12 }"
          resize="none"
          placeholder="留言内容"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="flex justify-center">
      <el-button type="primary" size="large" @click="handlePost()">发表</el-button>
      <el-button type="primary" size="large" link @click="handleBack(true)">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus'
// import { DocumentAdd } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import useViewStore from '@/stores/view.js'
import useUserStore from '@/stores/user.js'
import useCommonStore from '@/stores/common.js'

const commonStore = useCommonStore()
const userStore = useUserStore()
const viewStore = useViewStore()
const router = useRouter()

const userList = computed(() => commonStore.userList)

const isLoading = ref(false)

const office = ref('')
const isAnonymous = ref(true)
const isPublic = ref(true)
const mentionedUsers = ref([])
const text = ref('')
const user = computed(() => userStore.user)

const handleBack = (confirm) => {
  if (confirm && text.value.length > 0) {
    ElMessageBox.confirm('您已填写留言内容，确定要放弃已编辑内容并取消发表吗？', '取消发表', {
      confirmButtonText: '手滑了~',
      cancelButtonText: '放弃已编辑内容',
      type: 'warning',
      closeOnClickModal: false,
      closeOnPressEscape: false,
      showClose: false
    })
      .then(() => {
        //
      })
      .catch(() => {
        router.back()
      })
  } else {
    router.back()
  }
}

const handleCheck = () => {
  if (!isAnonymous.value && !user.value) {
    ElNotification({
      title: '填写错误',
      message: '未登录状态不可发表实名信息',
      type: 'error'
    })
    return false
  } else if ((isAnonymous.value || !user.value) && !isPublic.value) {
    ElNotification({
      title: '填写错误',
      message: '未登录状态发表非公开信息',
      type: 'error'
    })
    return false
  } else if (!isPublic.value && !mentionedUsers.length) {
    ElNotification({
      title: '填写错误',
      message: '非公开信息需设置可见人员',
      type: 'error'
    })
    return false
  } else if (text.value.length < 6) {
    ElNotification({
      title: '填写错误',
      message: '留言长度不小于6个字',
      type: 'error'
    })

    return false
  } else {
    return true
  }
}

const handlePost = () => {
  let checkResult = handleCheck()
  console.log('checkResult', checkResult)
  if (checkResult) {
    ElMessageBox.confirm('发表后将无法再次修改或删除留言，确认内容正确并要提交吗？', '内容确认', {
      confirmButtonText: '确认发表留言',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false,
      closeOnPressEscape: false,
      showClose: false
    })
      .then(() => {
        isLoading.value = true
        const params = {
          office: office.value,
          anonymous: isAnonymous.value ? 1 : 0,
          public: isPublic.value ? 1 : 0,
          user: user.value,
          mentioned: mentionedUsers.value,
          text: text.value
        }
        viewStore
          .post(params)
          .then((data) => {
            if (data.result) {
              console.log('sendPost', data)
              ElNotification({ type: 'success', title: '已发表留言' })
              viewStore.load().then(() => {
                isLoading.value = false
                handleBack()
              })
            } else {
              console.warn('sendPost', data)
              ElNotification({ type: 'warning', title: '出错了' })
              isLoading.value = false
            }
          })
          .catch(() => {
            ElNotification({ type: 'error', title: '出错了' })
            isLoading.value = false
          })
      })
      .catch(() => {})
  } else {
  }
}

onMounted(() => {
  office.value = viewStore.office
  console.log('office:', viewStore.office)
})
</script>
